<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>院系管理</title>

    <link rel="stylesheet" href="../static/css/index.css">
    <link rel="stylesheet" href="../static/eui/element-ui.css">

    <script src="../static/js/vue.min.js"></script>
    <script src="../static/js/axios.min.js"></script>
    <script src="../static/eui/index.js"></script>
    <script src="../static/js/ckeditor.js"></script>

    <script src="../static/js/App.js"></script>
    <script src="../static/js/auth.js"></script>
    <script src="../static/js/checkIsLogin.js"></script>
    <script src="../static/js/FormBoxComponent.js"></script>
    <script src="../static/js/DataListComponent.js"></script>
    <script src="../static/js/RefreshComponent.js"></script>
    <link rel="stylesheet" href="../static/css/template.css">
    <style>
        .ck-editor__editable {
            width: 872px;
            height: 150px;
        }
    </style>
</head>
<body>
<div id="app">
    <refresh-comm></refresh-comm>
    <!--引用form-box-comm组件-->
    <form-box-comm ref="myForm"
                   :form-type="1"
                   :box-title="boxTitle"
                   :add-api-url="url"
                   :edit-api-url="url"
                   :model="model"
                   :id-key="model.id"
                   :before-save="beforeSave"
                   :on-validate="formValidateHandler"
                   :on-success="successHandler">
        <!--添加自己的元素-->
        <template>
            <div class="item">
                <label for="name">院系名称：</label>
                <input style="width: 300px;" id="name" v-model="model.name">
            </div>

            <div class="item">
                <label for="des">院系概况：</label>
                <div id="des"></div>
            </div>
        </template>
        <!--添加自己的元素 结束-->
    </form-box-comm>

    <!--引用data-list-comm组件-->
    <data-list-comm ref="myList"
                    :list-api-url="url"
                    :delete-api-url="url"
                    :model-attr="modelAttr"
                    row-id-key="id"
                    :on-add-new-form="onAddNewFormHandler"
                    :on-edit-form="onEditFormHandler"
                    is-page="true"></data-list-comm>

</div>
<script>

    let vue = new Vue({
        el: "#app",
        data: {
            boxTitle: '新增院系',
            url: global_api_url + "organization",

            //表单的对象
            // 表单的对象不一定和列表表单字段一样，所以单独定义
            model: {
                id: null,
                name: null,
                des: ""
            },

            ckEditor : null,

            //列表的表单头，支持的定义格式如下：
            modelAttr: [
                {
                    display: '编码',
                    attribute: 'id'
                },
                {
                    display: '院系名称',
                    attribute: 'name'
                },
                {
                    display: '院系概况',
                    attribute: 'des'
                }]
        },
        created(){

        },
        //让DOM挂载完毕后，再设置富文本
        mounted() {
            this.setCkEditor();
        },

        methods: {

            /**
             * 富文本对象创建和设置相关值
             */
            setCkEditor() {
                if(this.model.id != null){
                    let text = this.model.des? this.model.des : "";
                    App.initEditor("des", text, this.ckEditor,rs=>this.ckEditor = rs);
                }else{
                    App.initEditor("des", "", this.ckEditor, rs=>this.ckEditor = rs);
                }
            },


            //保存前
            beforeSave(model) {
                console.log("this.ckEditor===>",this.ckEditor);
                model.des = this.ckEditor.getData();
                return model;
            },

            /**
             * 挂载表单保存数据前，验证方法
             * 这个方法必须有true/false返回值
             */
            formValidateHandler(model) {
                //console.log(model);
                if(model.name !=null && model.name !=""){
                    return true;
                }else {
                    alert("请输入名称！");
                    return false;
                }
            },

            /**
             * 数据保存成功后执行
             */
            successHandler(data) {
               this.$refs.myList.getModelList();
            },

            //============================================

            /**
             * 挂载新建表单方法
             */
            onAddNewFormHandler() {
                //恢复原样
                this.model = {};
                //重新调用，设置富文本方法
                this.setCkEditor();
                //打开窗口
                
                this.boxTitle = '新增院系';
            },

            /**
             * 挂载获得编辑表单方法
             */
            onEditFormHandler(row) {
                //打开窗口
                
                this.boxTitle = `正在修改[${row.name}]`;
                //赋值
                this.model = row;
                
                //重新调用，设置富文本方法
                this.setCkEditor();
            },
        }
    });




</script>
</body>
</html>